<template>
  <div class="tuijiandiantai">
    <div class="title tanxin">
      <h2>{{ list[0].category }} ·电台</h2>
      <span>更多&gt;</span>
    </div>
    <ul class="tanxin">
      <li class="tanxin" v-for="(item, index) in list" :key="index">
        <img :src="item.picUrl" alt="" />
        <div class="li_div">
          <h4>{{ item.name }}</h4>
          <p>{{ item.rcmdtext }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["list"],
  data() {
    return {};
  },
};
</script>
 
<style lang = "less" scoped>
@import "@/assets/base.less";
.tuijiandiantai {
  margin-top: 40px;
  .title {
    height: 42px;
    border-bottom: 3px solid @red;
    h2 {
      line-height: 42px;
      font-weight: 400;
      font-size: 24px;
    }
    span {
      line-height: 42px;
      font-size: 12px;
      color: #666;
    }
  }
  ul {
    flex-wrap: wrap;
    justify-content: flex-start;
    li {
      width: 485px;
      height: 161px;
      justify-content: flex-start;
      &:nth-child(2),
      &:nth-child(4) {
        margin-left: 30px;
      }
      &:nth-child(1),
      &:nth-child(2) {
        border-bottom: 1px solid #ccc;
      }
      img {
        width: 120px;
        height: 120px;
        margin-top: 20px;
      }
      .li_div {
        margin-left: 20px;
        margin-top: 40px;
        h4 {
          font-size: 16px;
          margin-bottom: 20px;
        }
        p {
          font-size: 12px;
        }
      }
    }
  }
}
</style>